import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'


export default defineConfig({
  rules: [
    ['fl-r', {
      display: 'flex',
      'flex-direction': 'row'
    }],
    ['fl-c', {
      display: 'flex',
      'flex-direction': 'column'
    }],
    ['center', {
      display: 'flex',
      'justify-content': 'center',
      'align-items': 'center',
      'text-align': 'center',
    }],
    ['full', {
      width: '100%',
      height: '100%'
    }],
    [/^(?:flex-|grid-)?gap-col-?()(.+)$/, match => ({'column-gap': `${match[3]}px`})],
    [/^(?:flex-|grid-)?gap-row-?()(.+)$/, match => ({'row-gap': `${match[3]}px`})],
    [/^(?:flex-|grid-)?g-col-?(.+)-(.+)$/, match => ({'grid-column': `${match[2]}/${match[3]}`})]
  ],
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      }
    })
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup()
  ]
})
